<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>小米社区</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <!--字体图标在线引用-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1984524_gfgs1y7ckuj.css">
    <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_1984539_rysan6veihc.css">-->

    <style>
        body {
            background-color: #E7EAED;
        }

        span {
            margin: 0;
            padding: 0;
            border: 0;
            vertical-align: baseline;
        }

        a {
            text-decoration: none;
        }

        a:link {
            color: #000000
        }

        /* 未被访问的链接 蓝色 */
        a:visited {
            color: #FF594A
        }

        /* 已被访问过的链接 蓝色 */

        #mi-header .mi-wrapper {
            width: 100%;
            height: 62px;
            background-color: #FFFFFF;
            display: flex;
        }

        #mi-header .mi-wrapper .mi-nav {
            width: 1170px;
            height: 60px;
            background-color: #FFFFFF;
            font: 16px mipro;
            margin: 0px 46px;
            display: flex;
            white-space: nowrap;
            align-items: center;
        }

        #mi-header .mi-wrapper .mi-nav .mi-icon {
            width: 63px;
            height: 48px;
        }

        #mi-header .mi-wrapper .mi-nav .mi-img {
            width: 36px;
            height: 36px;
            margin: 8px 13px 0px 14px;
        }


        #mi-header .mi-wrapper .mi-nav .mi-nav-logo {
        }

        #mi-header .mi-wrapper .mi-nav .mi-nav-styleLine {
            display: flex;
            margin: auto;
            align-items: center;
            white-space: nowrap;
        }

        #mi-header .mi-wrapper .mi-nav .mi-nav-styleLine .mi-nav-style {
            margin: 0px 40px 0px 0px;
        }

        .activeName > a {
            color: #000000;
            text-font: 16px mipro-medium;
        }

        .noActiveName > a {
            color: rgba(0, 0, 0, 0.65);
            font: 14px mipro;
            opacity: .7;
        }

        #mi-header .mi-wrapper .mi-nav .mi-nav-login {
            width: 90px;
            height: 60px;
        }

        #mi-header .mi-wrapper .mi-nav .mi-nav-login .mi-nav-login-text {
            cursor: pointer;
            float: right;
            margin-right: 20px;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-top: 15px;
            background: #ff594a;
            color: #fff;
            border-radius: 18px;
            font-size: 14px;
        }

        #mi-content .mi-content-wrapper {
            width: 670px;
            height: 2000px;
            background-color: white;
            padding: 0px 40px;
            margin-left: 256px;
            margin-top: 10px;
        }

        #mi-content .mi-content-wrapper .mi-content-div {
            width: 590px;
            height: 2000px;
            margin-left: 40px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article {
            width: 590px;
            height: 248px;
            margin: 10px 0px 0px;
            position: relative;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-title {
            width: 590px;
            height: 42px;
            margin-top: 10px;
            display: flex;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-title .mi-img {
            width: 40px;
            height: 40px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-title .mi-name {
            width: 60px;
            height: 23.33px;
            opacity: .9;
            font-family: mipro-medium;
            font-size: 15px;
            color: #000;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-title .mi-from {
            width: 60px;
            height: 18.67px;
            opacity: .5;
            font-size: 12px;
            color: #000;
            font-weight: 400;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-mid {
            width: 590px;
            height: 112px;
            display: flex;
            justify-content: space-between;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-mid .mi-mid-left {
            width: 190px;
            height: 110px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-mid .mi-mid-left .mi-mid-img {
            width: 190px;
            height: 110px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-mid .mi-mid-right {
            width: 390px;
            height: 27px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-mid .mi-mid-right .mi-mid-title {
            font-size: 18px;
            align-items: center;
            max-height: 27px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            opacity: .8;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-mid .mi-mid-right .mi-mid-title .mi-topping {
            display: inline-block;
            width: 34px;
            height: 18px;
            line-height: 18px;
            background: #ed2701;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
            letter-spacing: .86px;
            text-align: center;
            margin-right: 10px;
            vertical-align: middle;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-mid .mi-mid-right .mi-content {
            width: 390px;
            height: 78px;
            margin: 7px 0px 0px;
            font: 16px mipro;
            color: rgba(0, 0, 0, 0.5);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom {
            width: 590px;
            height: 22px;
            margin: 25px 0px 0px;
            padding: 0px 0px 26px;
            display: flex;
            white-space: nowrap;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, .1);
        }


        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-left-bottom {
            width: 156px;
            height: 22px;
            display: flex;
            justify-content: space-between;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-left-bottom
        .mi-card-topic {
            width: 60px;
            height: 22px;
            width: fit-content;
            margin-right: 16px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-left-bottom
        .mi-card-topic > span {
            opacity: .4;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-left-bottom
        .mi-card-circle {
            width: 80px;
            height: 22px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-left-bottom
        .mi-card-circle > span {
            opacity: .4;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-left-bottom
        .mi-card-topic .mi-topic-img {
            width: 14px;
            height: 14px;
            margin: -3px 4px 0px 0px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-left-bottom
        .mi-card-circle .mi-circle-img {
            width: 14px;
            height: 14px;
            margin: -3px 4px 0px 0px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom {
            width: 217.5px;
            height: 22px;
            margin-right: 0px;
            display: flex;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom
        .mi-card-look {
            width: 67.2px;
            height: 22px;
            color: rgba(0, 0, 0, 0.5);
            font: 14px mipro;
            margin: 0px 20px 0px 0px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom
        .mi-card-look > span {
            width: 33px;
            height: 18.6px;
            color: rgba(0, 0, 0, 0.5);
            font: 14px mipro;
            margin-right: 6px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom
        .mi-card-reply {
            width: 58px;
            height: 22px;
            margin-right: 26px;
            cursor: pointer;
            color: unset;
            display: flex;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom
        .mi-card-reply .mi-reply-img {
            width: 22px;
            height: 19px;
            margin: 0px 9px 0px 0px;
            align-items: center;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom
        .mi-card-reply > span {
            width: 28px;
            height: 19px;
            color: rgba(0, 0, 0, 0.5);
            font: 14px mipro;
            align-items: center;
            font-weight: 400;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom
        .mi-card-support {
            width: 46.4px;
            height: 22px;
            display: flex;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom
        .mi-card-support .icon-dianzan {
            width: 22px;
            height: 19px;
            margin: 0px 8px 0px 0px;
            align-items: center;
            cursor: pointer;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-article .mi-bottom .mi-right-bottom
        .mi-card-support > span {
            width: 16.4px;
            height: 18.67px;
            color: rgba(0, 0, 0, 0.5);
            font: 14px mipro;
            align-items: center;
        }


        /*图片块*/
        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic {
            width: 590px;
            height: 387px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-mid {
            width: 590px;
            height: 56px;
            margin: 16px 0px 3px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-mid > span {
            width: 590px;
            height: 52px;
            color: rgba(0, 0, 0, 0.8);
            font: 18px mipro;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-mid-images {
            width: 590px;
            height: 196px;
            line-height: 196px;
            display: flex;
            flex-wrap: wrap;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-mid-images .mi-img {
            margin-right: 10px;
            width: 186px;
            height: 186px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-mid-images .mi-img > img {
            width: 186px;
            height: 186px;
            object-fit: cover;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom {
            width: 590px;
            height: 50px;
            margin: 20px 0px 0px 0px;
            padding: 0px 0px 26px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, .1);
        }


        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-left-bottom {
            width: 268px;
            height: 22px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-left-bottom
        .mi-card-topic {
            width: 130px;
            height: 22px;
            margin-right: 16px;
            align-items: center;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-left-bottom
        .mi-card-topic > span {
            opacity: .4;
            font: 12px mipro;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-left-bottom
        .mi-card-circle {
            width: 112px;
            height: 22px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-left-bottom
        .mi-card-circle > span {
            opacity: .4;
            font: 12px mipro;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-left-bottom
        .mi-card-topic .mi-topic-img {
            width: 10px;
            height: 10px;
            margin: -3px 3px 0px 0px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-left-bottom
        .mi-card-circle .mi-circle-img {
            width: 10px;
            height: 10px;
            margin: -3px 3px 0px 0px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom {
            width: 240px;
            height: 22px;
            margin-right: 0px;
            display: flex;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom
        .mi-card-look {
            width: 67.2px;
            height: 22px;
            color: rgba(0, 0, 0, 0.5);
            font: 12px mipro;
            margin: 0px 20px 0px 0px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom
        .mi-card-look > span {
            width: 33px;
            height: 18.6px;
            color: rgba(0, 0, 0, 0.5);
            font: 12px mipro;
            margin-right: 6px;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom
        .mi-card-reply {
            width: 58px;
            height: 22px;
            margin-right: 26px;
            cursor: pointer;
            color: unset;
            display: flex;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom
        .mi-card-reply .mi-reply-img {
            width: 18px;
            height: 18px;
            margin: 0px 9px 0px 0px;
            align-items: center;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom
        .mi-card-reply > span {
            width: 28px;
            height: 19px;
            color: rgba(0, 0, 0, 0.5);
            font: 12px mipro;
            align-items: center;
            font-weight: 400;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom
        .mi-card-support {
            width: 46.4px;
            height: 22px;
            display: flex;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom
        .mi-card-support .icon-dianzan {
            width: 18px;
            height: 18px;
            margin: 0px 8px 0px 0px;
            align-items: center;
            cursor: pointer;
        }

        #mi-content .mi-content-wrapper .mi-content-div .mi-content-pic .mi-bottom .mi-right-bottom
        .mi-card-support > span {
            width: 16.4px;
            height: 18.67px;
            color: rgba(0, 0, 0, 0.5);
            font: 12px mipro;
            align-items: center;
        }
    </style>
</head>

<body>
<!--头部部分-->
<div id="mi-header">
    <!--头部容器-->
    <div class="mi-wrapper">
        <!--头部导航-->
        <div class="mi-nav">
            <div class="mi-icon">
                <img class="mi-img" src="/images/community/mi-icon.png" alt="">
            </div>
            <div class="mi-nav-logo">小米社区</div>
            <div class="mi-nav-styleLine">
                <div class="mi-nav-style activeName">
                    <a href="">广场</a>
                </div>
                <div class="mi-nav-style noActiveName">
                    <a href="">圈子</a>
                </div>
                <div class="mi-nav-style noActiveName">
                    <a target="_blank" href="https://www.miui.com/download.html">MIUI下载</a>
                </div>
                <div class="mi-nav-style noActiveName">
                    <a target="_blank" href="https://www.miui.com/unlock/index.html">手机解锁</a>
                </div>
                <div class="mi-nav-style noActiveName">
                    <a target="_blank" href="https://home.miui.com/">MIUI12</a>
                </div>
                <div class="mi-nav-style noActiveName">
                    <a href="">小米商城</a>
                </div>
            </div>
            <div class="mi-nav-login">
                <a href="/user/login.jsp">
                    <div class="mi-nav-login-text">登录</div>
                </a>
            </div>
        </div>
    </div>
</div>
<!--内容部分-->
<div id="mi-content">
    <!--内容容器-->
    <div class="mi-content-wrapper">
        <div class="mi-content-div">
            <!--文章类-->
            <div class="mi-content-article">
                <div class="mi-title">
                    <div class="mi-title-icon">
                        <img class="mi-img" src="/images/community/mi-icon-article.png" alt="">
                    </div>
                    <div class="mi-right">
                        <div class="mi-name">小米社区</div>
                        <div class="mi-from">来自PC端</div>
                    </div>
                </div>
                <div class="mi-mid">
                    <div class="mi-mid-left">
                        <img class="mi-mid-img" src="/images/community/mi-mid.png" alt="">
                    </div>
                    <div class="mi-mid-right">
                        <div class="mi-mid-title">
                            <div class="mi-topping">置顶</div>
                            "【社区小报】雷总想和你聊聊&MIUI这个功能有更新"
                        </div>
                        <div class="mi-mid-content">
                            大家好，我是赵高兴今天由我来为大家带来本周的社区小报
                            本周内容如下>>
                            雷总想和你聊聊
                            今年是小米十周年，感谢米粉一路同行。
                            我们决定办一个十周年特别演讲，和朋友们聊聊天。
                            准备了几款十周年代表作，让大家“检阅”一下小米十周年的成绩。
                            大家期待吗？
                        </div>
                    </div>
                </div>
                <div class="mi-bottom">
                    <div class="mi-left-bottom">
                        <div class="mi-card-topic">
                            <img class="mi-topic-img"
                                 src="//rs.vip.miui.com/vip-resource/prod/mio-pc/v1/static/media/jinghao.6b4573d3.svg"
                                 alt="">
                            <span>聊一聊</span>
                        </div>
                        <div class="mi-card-circle">
                            <img class="mi-circle-img"
                                 src="//rs.vip.miui.com/vip-resource/prod/mio-pc/v1/static/media/circle.a164d69a.svg"
                                 alt="">
                            <span>小米社区</span>
                        </div>
                    </div>
                    <div class="mi-right-bottom">
                        <div class="mi-card-look">
                            <span>11.1w</span>
                            浏览
                        </div>
                        <div class="mi-card-reply">
                            <img class="mi-reply-img"
                                 src="//rs.vip.miui.com/vip-resource/prod/mio-pc/v1/static/media/res_.0cec908a.svg"
                                 alt="">
                            <span>1103</span>
                        </div>
                        <div class="mi-card-support">
                            <!--                            <img class="mi-support-img"-->
                            <!--                                 src="//rs.vip.miui.com/vip-resource/prod/mio-pc/v1/static/media/zan.d9076d4f.svg"-->
                            <!--                                 alt="">-->
                            <i class="iconfont icon-dianzan"></i>
                            <span>0</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--图片类-->

            <c:forEach items="${list}" var="item">
                <div class="mi-content-pic">
                    <div class="mi-title">
                        <div class="mi-title-icon">
                            <img class="mi-img" src="/images/community/mi-icon-article.png" alt="">
                        </div>
                        <div class="mi-right">
                            <div class="mi-name">${item.username}</div>
                            <div class="mi-from">${item.phonetype}</div>
                        </div>
                    </div>
                    <div class="mi-mid">
                        <span>${item.content}</span>
                    </div>
                    <div class="mi-mid-images">
                        <div class="mi-img">
                            <img class="mi-img" src="/images/community/mi-mid-1.png" alt="">
                        </div>
                        <div class="mi-img">
                            <img class="mi-img" src="/images/community/mi-mid-2.png" alt="">
                        </div>
                        <div class="mi-img">
                            <img class="mi-img" src="/images/community/mi-mid-3.png" alt="">
                        </div>
                    </div>
                    <div class="mi-bottom">
                        <div class="mi-left-bottom">
                            <div class="mi-card-topic">
                                <img class="mi-topic-img"
                                     src="//rs.vip.miui.com/vip-resource/prod/mio-pc/v1/static/media/jinghao.6b4573d3.svg"
                                     alt="">
                                <span>${item.topic}</span>
                            </div>
                            <div class="mi-card-circle">
                                <img class="mi-circle-img"
                                     src="//rs.vip.miui.com/vip-resource/prod/mio-pc/v1/static/media/circle.a164d69a.svg"
                                     alt="">
                                <span>${item.circle}</span>
                            </div>
                        </div>
                        <div class="mi-right-bottom">
                            <div class="mi-card-look">
                                <span>11.1w</span>
                                浏览
                            </div>
                            <div class="mi-card-reply">
                                <img class="mi-reply-img"
                                     src="//rs.vip.miui.com/vip-resource/prod/mio-pc/v1/static/media/res_.0cec908a.svg"
                                     alt="">
                                <span>1103</span>
                            </div>
                            <div class="mi-card-support">
                                <!--                            <img class="mi-support-img"-->
                                <!--                                 src="//rs.vip.miui.com/vip-resource/prod/mio-pc/v1/static/media/zan.d9076d4f.svg"-->
                                <!--                                 alt="">-->
                                <a href="/api/user/selectZans?username=${item.username}&type=${type}">
                                    <i class="iconfont icon-dianzan" id="${item.username}"></i>
                                </a>
                                <span>${item.zans}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </c:forEach>


        </div>
    </div>
</div>


<!--引用-->
<script src="/static/js/jquery.min.js"></script>

<%--静态点赞--%>
<!--点击点赞变色,再次点击取消赞-->
<!--点赞后点赞数+1，取消赞后点赞数-1-->
<%--<script>--%>
<%--    $(' .icon-dianzan').on('click', function () {--%>
<%--        if ($(this).css('color') == 'rgb(0, 0, 0)') {--%>
<%--            $(this).css({"color": "#FF594A"});--%>
<%--            let count = $(this).parent().children('span').text();--%>
<%--            count++;--%>
<%--            $(this).parent().children('span').text(count);--%>
<%--        } else {--%>
<%--            $(this).css({"color": "#000000"})--%>
<%--            let count = $(this).parent().children('span').text();--%>
<%--            count--;--%>
<%--            $(this).parent().children('span').text(count);--%>
<%--        }--%>
<%--    })--%>
<%--</script>--%>

<%--动态点赞--%>
<script>
    //加载页面时获取当前点赞用户id 和 被点赞用户 id
    //到数据库中查询 点赞id 和 被 点赞id，点赞数查询sum进行数据渲染
    //用户点赞时，查询点赞状态，如果为0，则改为1，刷新页面并且将点赞样式渲染
    window.onload = function zan() {

            if ('${type}'=='1') {
                $('#${username}').css({"color": "#FF594A"});
            } else {
                $('#${username}').css({"color": "#000000"})
            }

    }
</script>


<%--评论--%>
<script>

</script>
</body>
</html>
